package myJs.user.workflow.featureSelection.oplsda

import com.softwaremill.quicklens._
import myJs.Implicits._
import myJs.cps.{InputCp, SelectCp, ToggleCp}
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import myJs.tool.Tool.messages
import myJs.user.workflow.featureSelection.FeatureSelection
import org.scalajs.dom.html
import shared.pojo.WorkflowMission._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import scala.scalajs.js.JSON
import myJs.myPkg.jquery._
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._
import myJs.myPkg.MyReact
import myJs.Utils._

/** Created by yz on 3/11/2020
  */
object OplsdaCp {

  case class Props(
      curI: Int,
      data: EachOplsdaData,
      dataChange: EachOplsdaData => SyncIO[Unit],
      dataModifyF: (EachOplsdaData=>EachOplsdaData) => SyncIO[Unit],
      fsData: FsData
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val curTool = Oplsda
    val divRef = MyReact.createRef[html.Div]

    object FTool {

      def scaleMethodChange = (v: String) => {
        val newData = props.data.modify(_.scaleMethod).setTo(v)
        props.dataChange(newData)
      }

      def groupModifyF = (v: String) => {
        val newData = modify(_:EachOplsdaData)(_.group).setTo(v)
        props.dataModifyF(newData)
      }

      def vipChange = (v: String) => {
        val newData = props.data.modify(_.vip).setTo(v)
        props.dataChange(newData)
      }

      def q2YChange = (v: String) => {
        val newData = props.data.modify(_.q2Y).setTo(v)
        props.dataChange(newData)
      }

      def q2YBChange = (v: String) => {
        val newData = props.data.modify(_.q2YB).setTo(v)
        props.dataChange(newData)
      }

      def dataChange = (newData: EachOplsdaData) => {
        props.dataChange(newData)
      }

    }

    val namePrefix = s"oplsda.${props.curI}"
    val formState = ReactHookForm.useFormState(options =
      UseFormStateOptions(
        name = namePrefix
      )
    )
    useEffect(
      SyncIO{
        Tool.refreshNodeColor(
          props.data.nodeId,
          formState,
          namePrefix
        )
      },
      List(formState)
    )

    val scaleMethodMap = Tool.scaleMethodMap
    val dataMatrixGroups = props.fsData.dataMatrix.groups
    val isMul = dataMatrixGroups.size != 2
    val groupMap = Tool.getGroupVs(dataMatrixGroups).optionMap

    div(
      vRef := divRef,
      SelectCp.Props(
        value = props.data.scaleMethod,
        label = messages("scaleMethod"),
        name = s"${namePrefix}.scaleMethod",
        optionMap = scaleMethodMap,
        onChange = FTool.scaleMethodChange
      ).render,
      SelectCp.Props(
        value = props.data.group,
        label = messages("group"),
        name = s"${namePrefix}.group",
        optionMap = groupMap,
        onChange = FTool.groupModifyF,
        show = isMul
      ).render,
      InputCp.Props(
        value = props.data.vip,
        show = true,
        label = messages("vipCutoff"),
        name = s"${namePrefix}.vip",
        onChange = FTool.vipChange,
        questionInfo = messages("oplsdaVipInfo")
      ).render,
      InputCp.Props(
        value = props.data.q2Y,
        show = true,
        label = messages("q2yLowLimit"),
        name = s"${namePrefix}.q2Y",
        onChange = FTool.q2YChange,
        questionInfo = messages("q2yLowLimitInfo")
      ).render,
      InputCp.Props(
        value = props.data.q2YB,
        show = true,
        label = messages("upLimitOfQ2Y"),
        name = s"${namePrefix}.q2YB",
        onChange = FTool.q2YBChange,
        questionInfo = messages("upLimitOfQ2YInfo")
      ).render
    )

  }

}
